<template>
    <div class="changePassword">
        <assets-head :title="$t('修改资金密码')" />
        <div class="line"></div>
        <div class="content">
            <ExInput :label="$t('新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="password"
                typeText="password" />
            <ExInput :label="$t('确认新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="rePassword"
                typeText="password" />
            <ExChecked class="mb-42" :list="list" @checked="onChecked"></ExChecked>
            <p class="label mt-14 textColor">{{ $t('验证码') }}</p>
            <div class="iptbox inputBackground">
                <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
                <span v-if="type!=3" @click="senCode">{{ $t('发送验证码') }}<template v-if="time"> ({{time}})s</template></span>
            </div>
            <div class="btn" @click="submit">{{ $t('确定') }}</div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ExChecked from "@/components/ex-checked";
import Axios from "@/API/userCenter.js";
import ApiLogin from "@/API/login.js";
export default {
    props: {

    },
    components: {
        assetsHead,
        ExInput,
        ExChecked
    },
    data() {
        return {
            password: '', //密码
            rePassword:'',//确认密码
            verifcode_type: '',// 验证类型：1/手机；2/邮箱；3/谷歌验证器；
            verifyCode:'', //验证码
            type:2, //默认选中
            list:[
                // {
                //     name: this.$t('手机验证'),
                //     type: 1
                // },
                {
                    name: this.$t('邮箱验证'),
                    type: 2
                },
                {
                    name: this.$t('谷歌验证') ,
                    type:3
                },
            ],
            email_authority:false, //是否绑定邮箱
            google_auth_bind: false,//是否绑定谷歌
            phone_authority: false,//是否绑定手机
            email:'',
            phone:'',
            google_auth_secret:'',
            account:'',
            timer: '',
            time: 0
        }
    },
     mounted(){
         this.getVerifTarget();
         clearInterval(this.timer)
    },
    methods: {
        onChecked(type){
            this.type = type;
            if (this.type == 3 && !this.google_auth_bind){
                this.$toast(this.$t('请绑定谷歌验证器'))
            }
            if(this.type ==1){
                this.account = this.phone;
            } else if (this.type == 2){
                this.account = this.email;
            } else if (this.type == 3) {
                this.account = this.google_auth_secret;
            }
        },
        submit() {
            if (this.password.length<6){
                this.$toast(this.$t('资金密码(6位数字)'))
                return false
            }
            Axios.setSafeword({
                safeword: this.password,
                verifcode_type: this.type,
                verifcode: this.verifyCode
            }).then((res) => {
                this.$toast(this.$t('修改成功'))
                setTimeout(() => {
                    this.$router.push('/home')
                }, 1000)
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}      
            });
        },
        async getVerifTarget(){
            Axios.getVerifTarget({

            }).then((res) => {
                this.email_authority = res.data.email_authority
                this.google_auth_bind = res.data.google_auth_bind
                this.phone_authority = res.data.phone_authority
                this.email = res.data.email
                this.phone = res.data.phone
                this.google_auth_secret = res.data.google_auth_secret
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}         
            });

        },
        senCode() {
            if (this.type == 1 && !this.phone_authority) {
                this.$toast(this.$t('请绑定手机'));
                return false
            }
            if (this.type==2&&!this.email_authority){
                this.$toast(this.$t('请绑定邮箱'));
                return false
            }
            this.onChecked(this.type)
            if (this.time > 0) {
                return false
            }
            ApiLogin.sendVerifyCode({
                target: this.account,
            }).then((res) => {
                this.$toast(this.$t('发送成功'));
                this.time = 30;
                this.timer = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
                    } else {
                        this.time = 0;
                        clearInterval(this.timer)
                    }
                }, 1000);
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}
            });
        },
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style lang="scss" scoped>
.changePassword{
    width: 100%;
    box-sizing: border-box;
}










.line {
    width: 100%;
    height: 2px;
    background: $tab_background;
}

.content {
    padding: 32px;
    font-size: 26px;
}

.btn {
    background: $btn_main;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 44px;
    border-radius: 10px;
    width: 100%;
    border: none;
}


.iptbox {
    height: 88px;
    margin-top: 16px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;

    input {
        flex: 1;
        height: 100%;
        border: none;
    }

    span {
        color: #1D91FF;
    }
}
</style>
